<template>
  <div class="panel-container">
    <ForgetHeadbar :title="alter == 1 ? '修改密码':'忘记密码'" />
    <div class="panel-steps">
      <el-steps :active="active" status="true" align-center>
        <el-step title="验证身份"></el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <div class="panel-changeBindTel">
      <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="140px" class="demo-ruleForm">

        <el-form-item label="手机号码："  prop="mobile" v-if="active==1 && alter !=1">
          <el-input placeholder="输入您账号绑定的手机号码" @blur = "setVcodeParams()" v-model="ruleForm1.mobile" style="width:320px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号码："  v-if="active==1 && alter ==1">
          <span style="width:320px;">{{getVcodeParams}}</span><span style="padding-left: 20px; color : #808080;" >(为了保证您的账号安全，请验证身份，验证成功后才能修改密码)</span>
        </el-form-item>
        <el-form-item label="验证码: " prop="code" v-if="active==1">
            <el-input class="vcode-input" placeholder="请填写手机验证码" style="width:168px; margin-right:10px"  v-model="ruleForm1.code"></el-input>
            <GetVcode :params="getVcodeParams" @vcodeCallback="sendVcodeSuccess" />
          </el-form-item>
          <el-form-item v-if="active==1">
            <el-button type="primary" @click="submitForm('ruleForm1')" style="width:320px;">下一步</el-button>
          </el-form-item>
        </el-form>



<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="140px" class="demo-ruleForm">
        <el-form-item label="设置新密码：" prop="newPassword" v-if="active==2">
          <el-input type="password"  placeholder="6-16位数字和字母组成" v-model="ruleForm2.newPassword" style="width:320px;"></el-input>
        </el-form-item>
        <el-form-item label="再次输入新密码：" prop="confimPassword" v-if="active==2">
          <el-input type="password"  placeholder="6-16位数字和字母组成" v-model="ruleForm2.confimPassword" style="width:320px;"></el-input>
        </el-form-item>

       <!--  <div class="bind-wechat" v-if="active==2">
          <div class="qrcode">
            <img src="https://dummyimage.com/210x210/00405d/FFF&text=qrcode" />
          </div>
          <p>请打开要绑定的微信，扫一扫扫描上方二维码，即可完成绑定</p>
        </div> -->


        <el-form-item v-if="active==2">
          <el-button type="primary" @click="submitForm('ruleForm2')" style="width:320px;">下一步</el-button>
        </el-form-item>

        <div class="panel-changeSuccess" v-if="active==3">
          <div class="tips"><svg-icon icon-class="correct" class="correct" />恭喜您，密码重置成功</div>
          <el-button type="primary" @click = "handleReLogin()">重新登录</el-button>
        </div>

      </el-form>
    </div>

    <div class="panel-changeBindTips"  v-if="active==1">
      <h5>没收到短信验证码？</h5>
      <div class="text">
        1、网络通讯异常可能会造成短信丢失，请重新获取或稍后再试。<br/>
        2、请核实手机是否已欠费停机，或者屏蔽了系统短信。<br/>
        3、如果手机已丢失或停用， 请选择其他验证方式 。<br/>
        4、您也可以尝试将SIM卡移动到另一部手机，然后重试。
      </div>
    </div>
  </div>
</template>

<script>

import { hexMD5 } from '@/utils/md5'
import ForgetHeadbar  from '@/components/Forget/header'
import GetVcode from '@/components/GetVcode/forgetPw'
import {validateMobile,setNewPassword } from '@/api/forget'
import { removeToken, removeAuthUserInfo } from '@/utils/auth'

export default {
  name: 'forgetPassword',
  components: {
    ForgetHeadbar,
    GetVcode,
  },
  data() {
    var validatePass = (rules2, value, callback) => {
      if (value ==null || value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 6 || value.length > 16) {
        callback(new Error('密码长度需在6~16之间'));
      } else {
        if (this.ruleForm2.newPassword !== '') {
          var reg = /^[0-9a-zA-Z]{6,16}$/g
          if (!reg.test(value)) {
            callback(new Error('密码为6~16位数字或字母组成'));
          }
          else{
            var reg = /^[0-9]{6,16}$/g
            var reg2 = /^[a-zA-Z]{6,16}$/g
            if (reg.test(value)) {
              callback(new Error('密码不能为纯数字'));
            }else if(reg2.test(value)){
              callback(new Error('密码不能为纯字母'));
            }
          }
        }
        callback();
      }
    };
    var validatePass2 = (rules2, value, callback) => {

        if (value !== this.ruleForm2.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    var validateMobile = (rules1, value, callback) => {
      if (value ==null || value === '') {
        callback(new Error('请输入绑定的手机号码'));
      }  else {
        if (value !== '') {
            var reg=/^1[3456789]\d{9}$/;
            if(!reg.test(value)){
              callback(new Error('请输入有效的手机号码'));
            }
          }
        callback();
      }
    };
    var validateCode = (rules1, value, callback) => {
      if (value ==null || value === '') {
        callback(new Error('请输入验证码'));
      }  else {
        if (value !== '') {
          var reg=/^\d{6}$/;
          if(!reg.test(value)){
            callback(new Error('请输入有效的验证码'));
          }
        }

        callback();
      }
    };
    return{
      alter: this.getUrlParams('alter'),
      active: 1,
      ruleForm1: {
        mobile: '',
        code: '',
      },
      ruleForm2: {
      newPassword: null,
      confimPassword:null,
      },

      rules1: {
        mobile: [
          { required: true, validator: validateMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, validator: validateCode, trigger: 'blur' }
        ],
      },
      rules2: {
      newPassword: [
        { required: true, validator: validatePass, trigger: 'change'}
      ],
      confimPassword: [
        {required: true, validator: validatePass2, trigger: 'change'}
      ]
    },
      getVcodeParams:null,
    }
  },
  methods: {
    handleReLogin(){
      removeToken()
      removeAuthUserInfo()
      this.routeToPath('/login');
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {

          if (valid && this.active == 1 ) {
            // 验证手机
            validateMobile({mobile: this.ruleForm1.mobile,
                              code: this.ruleForm1.code}).then(res =>{
                              if(res.code == 200)
                                {
                                  this.active += 1;
                                } else {
                                  return false;
                                }
                              });
          } else if(valid && this.active == 2 ){
            // 设置新密码
            setNewPassword({mobile: this.ruleForm1.mobile,
                       newPassword: hexMD5(this.ruleForm2.newPassword+'yhby'),
                              code: this.ruleForm1.code}).then(res =>{
                                if(res.code == 200)
                                  {
                                    this.active += 1;
                                  } else {
                                    this.active = 1;
                                    return false;
                                  }
                              });

          }

        // if(valid && this.active == 1 ){
        //   validateMobile({mobile: this.ruleForm.mobile,
        //                   code: this.ruleForm.code}).then(res =>{
        //                     console.log(res);
        //                     this.active += 1;
        //                   })
        // }

      });

    },
    sendVcodeSuccess(){

    },
    setVcodeParams(){
      this.getVcodeParams = this.ruleForm1.mobile;
      console.log(this.getVcodeParams);
    },

  },
  created(){
    if(this.alter == 1){
      this.getVcodeParams = this.getUserInfo().mobile;
      this.ruleForm1.mobile = this.getVcodeParams;
    }
  }


}
</script>

<style lang="scss">
  .panel-container{
    min-height: 100vh;
    background: #fff;
  }
  .panel-steps{
    width: 900px;
    margin: 40px auto;
  }
  .el-step__title{
    font-size: 14px;
  }
  .el-step__title.is-process{
    font-weight: 300;
    color: #c0c4cc;
  }
  .el-step__head.is-process{
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  .panel-changeBindTel{
    width: 700px;
    padding-left: 50px;
    margin: auto;
    .el-form-item{
      margin-bottom: 34px;
    }
    .step-1{
      color: #858383;
      font-size: 14px;
      span{
        color: red;
        margin-right: 20px;
      }
    }
  }
  .panel-changeBindTips{
    width: 760px;
    padding: 16px 20px;
    margin: 60px auto 30px;
    border: 1px solid #FFC7C7;
    color: #858383;
    background: #FFF4F4;
    font-size: 12px;
    line-height: 26px;
    h5{
      margin: 0;
      font-weight: 300;
      color: #646161;
    }
  }
  .panel-changeSuccess{
    margin-left: -50px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    color: #00AA03;
    .tips{
      margin-bottom: 20px;
    }
    .correct{
      font-size: 26px;
      display: inline-block;
      vertical-align: top;
      margin: 5px 10px 0 0;
    }
  }
  .bind-wechat{
    text-align: center;
    .qrcode{
      width: 230px;
      height: 230px;
      padding: 10px;
      margin: auto;
      border: 1px solid #eee;
    }
    p{
      font-size: 13px;
      color: #666;
      padding: 10px 0;
    }
  }
</style>
